<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>按时间段查询</title>
  <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
  <script src="js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
  <script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
  <style type="text/css">
    body{
      overflow-y: hidden;
      overflow: hidden;
    }
  </style>
</head>
<body>
<!--	查询时间段-->
<form class="layui-form">
  <div class="layui-form-item layui-input-inline">
    <label class="layui-form-label">开始日期</label>
    <div class="layui-input-inline" style="width: 200px;">
      <input type="text" name="start_date" id="start_date" class="layui-input"/>
    </div>
  </div>
  <div class="layui-form-item layui-input-inline">
    <label class="layui-form-label">结束日期</label>
    <div class="layui-input-inline" style="width: 100px;">
      <input type="text" name="end_date" class="layui-input" id="end_date"/>
    </div>
    <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
  </div>
</form>

<!--	数据表格-->
<table id="demo" lay-filter="test" ></table>
<script>
  //一般直接写在一个js文件中
  layui.use('table', function(){
    var table = layui.table;
    var element=layui.element;
    //第一个实例
    table.render({
      elem: '#demo'
      ,height: 550
      ,url: '/api/patrol/selectByTime' //数据接口
      ,where: {
        start_time: '',
        end_time: ''
      }
      ,page: true //开启分页
      ,cols: [[ //表头
        {type: 'checkbox', fixed: 'left'}
        ,{field: 'id', title: 'ID', width:60, sort: true, fixed: 'left'}
        ,{field: 'eventName', title: '事件名称', width:120}
        ,{field: 'startTime', title: '开始时间', width: 140, sort: true}
        ,{field: 'endTime', title: '结束时间', width: 140, sort: true}
        ,{field:'location', title: '地点'}
      ]],
      id: 'demo',
      defaultToolbar: ['filter', 'print', 'exports']
    });

    layui.use('laydate', function(){
      var laydate = layui.laydate;
      laydate.render({
        elem: '#start_date'
        ,type: 'date'
        ,done: function(value, date){
          //监听日期选择完毕事件，执行搜索
          table.reload('demo', {
            where: {
              start_time: value,
              end_time: $('#end_date').val()
            }
          });
        }
      });
    });
    layui.use('laydate', function(){
      var laydate = layui.laydate;
      laydate.render({
        elem: '#end_date'
        ,type: 'date'
        ,done: function(value, date){
          //监听日期选择完毕事件，执行搜索
          table.reload('demo', {
            where: {
              start_time: $('#start_date').val(),
              end_time: value
            }
          });
        }
      });
    });
  });

  layui.use('form',function () {
    var $=layui.jquery;
    var form=layui.form;
    form.on('submit(formDemo)',function (data) {
      table.reload('demo', {
        where: {
          start_time: $("#start_date").val(),
          end_time: $("#end_date").val()
        }
      });
      return false;
    });
  });

</script>
</body>
</html>
